<template>
  <div class="today-report">
    <div class="today-report-start">
      <div>今日上报情况</div>
    </div>
    <div class="today-report-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="已上报"></el-radio-button>
        <el-radio-button label="温度异常"></el-radio-button>
        <el-radio-button label="未上报"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="today-report-table">
      <table-list
        :toTableData="tableData"
        :tableHeader="tableHeader"
        :deleteEdit="deleteEdit"
        :btn1="btn1"
        :btn2="btn2"
      ></table-list>
    </div>

    <!-- <el-alert title="成功提示的文案" type="success"> </el-alert> -->
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "@/components/common/TableList.vue";
import TableSearch from "../../components/common/TableSearch";
export default {
  name: "vueName",
  data() {
    return {
      radio1: "未上报",
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "age", label: "年龄" },
        { prop: "gender", label: "性别" },
        { prop: "phone", label: "电话" },
        { prop: "address", label: "住址" },
        { prop: "tem", label: "温度" },
        { prop: "time", label: "时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 0,
        delete: 0,
        edit: 0,
      },
      btn1: "删除",
      btn2: "上报",
    };
  },
  components: {
    TableList,
    TableSearch,
  },
  created() {
    this.requestData();
  },

  methods: {
    requestData() {
      console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/b-tem-report", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            // console.log(res);
            if (this.radio1 == "已上报") {
              this.tableData = res.data.data.filter((s) => s.state > 0);
              this.tableHeader = [
                { prop: "name", label: "姓名" },
                { prop: "age", label: "年龄" },
                { prop: "gender", label: "性别" },
                { prop: "phone", label: "电话" },
                { prop: "address", label: "住址" },
                { prop: "tem", label: "温度" },
                { prop: "time", label: "时间" },
              ];
              this.tableData = this.tableData.map((s) => {
                if (s.gender == 1) {
                  s.gender = "男";
                } else {
                  s.gender = "女";
                }
                return s;
              });
            } else if (this.radio1 == "未上报") {
              this.tableData = res.data.data.filter((s) => s.state < 0);
              this.tableData = this.tableData.map((s) => {
                if (s.gender == 1) {
                  s.gender = "男";
                } else {
                  s.gender = "女";
                }
                return s;
              });
              this.tableHeader = this.tableHeader.slice(0, 5);
            } else if (this.radio1 == "温度异常") {
              this.tableHeader = [
                { prop: "name", label: "姓名" },
                { prop: "age", label: "年龄" },
                { prop: "gender", label: "性别" },
                { prop: "phone", label: "电话" },
                { prop: "address", label: "住址" },
                { prop: "tem", label: "温度" },
                { prop: "time", label: "时间" },
              ];
              this.tableData = res.data.data.filter((s) => s.state > 0);
              this.tableData = this.tableData.map((s) => {
                if (s.gender == 1) {
                  s.gender = "男";
                } else {
                  s.gender = "女";
                }
                return s;
              });
              this.tableData = res.data.data.filter((s) => s.tem > 37);
              // this.tableHeader = this.tableHeader.slice(0, 5);
            }

            // console.log(this.tableData);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.today-report {
  box-sizing: border-box;
  // margin: 20px;
  width: 100%;
  // height: 100%;
  padding: 20px;
  .today-report-start {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    margin-bottom: 10px;
    @include left;
    div {
      margin-left: 20px;
      font-size: 18px;
      color: rgb(20, 151, 90);
    }
  }

  .today-report-table {
    // height: 100%;
    background-color: #ffffff;
    // padding: 0 10px;
    box-sizing: border-box;
    // overflow: scroll;
    // overflow-y: scroll;
    .pagination {
      padding-top: 10px;
      padding-bottom: 100px;
      display: flex;
      @include right;
      background-color: #ffffff;
    }
  }
}
</style>
